<ul class="info-item-block">
    <li>
        <span class="item-hd item-title">套餐设置</span>
    </li>
    <li>
        <div class="item-bd alone-item-bd " style="max-width: 1670px!important;">
            <div class="item-pad" style="max-width: 1670px!important;">
                <div>
                    <i class="c-red">*</i><span class="c-333 f-12 mr-10">选择销售属性</span>
                </div>
                <div>
                    <label class="radio-label select-none mr-15">
                        <input type="checkbox" name="suit_sku[]" disabled value="suit" class="checkbox" checked="checked">套餐
                    </label>
                    {if !empty($all_period_time) && $info['is_open_multiple_ticket'] != 1}
                    <label class="radio-label select-none mr-15 ">
                        <input type="checkbox" name="suit_sku[]" {if !empty($period_times)}checked{/if} class="checkbox suit_sku" value="period_time">场次
                    </label>
                    {/if}
                </div>
                <div class="item-pad-block mt-10">
                    <div>
                        <span class="c-333 f-12 fw-4">套餐</span><i class="c-red">*</i>
                    </div>
                    <div class="mt-10">
                        <label class="text-number-con">
                            <input type="text" value="" id="suit_input" maxlength="20" placeholder="输入后点击 “添加” 或 “键盘回车键”" class="input-text w300"/>
                            <span class="text-number"><span class="number">0</span>/20</span>
                        </label>
                        <span class="btn btn-link" id="add_suit">+添加</span>
                    </div>
                    <div class="clear mt-10">
                        <div class="save-value-div f-n" id="suit_list">
                            {loop $tickets $ticket}
                            <span class="mb-5"><s class="del_suit_id"></s>{$ticket['title']}<input type="hidden" name="ticket_id" value="{$ticket['id']}"></span>
                            {/loop}
                        </div>
                    </div>
                </div>
                <div class="item-pad-block mt-20 {if empty($period_times) || $info['is_open_multiple_ticket'] == 1}hide{/if}" id="period_time_con">
                    <div><span class="c-333 f-12 fw-4">场次</span><i class="c-red">*</i></div>
                    <div class="sku-container">
                        {loop $all_period_time $period_time_item}
                        <label class="radio-label select-none mr-15">
                            <input type="checkbox" name="period_time" value="{$period_time_item['id']}" class="checkbox sku-item" {if !empty($period_times) && in_array($period_time_item['id'], $period_times)} checked="checked" {/if}>{$period_time_item['start']}-{$period_time_item['end']}
                        </label>
                        {/loop}
                    </div>
                </div>
                <div class="item-pad-block mt-20">
                    <div class="c-f60">*套餐更多详细或预订退改信息，请点击修改按钮</div>
                    <table class="mt-10 suit-edit-block active"  div_float=RC-k-j >
                        <thead id="suit_thead">

                        </thead>
                        <tbody id="suit_tbody">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </li>
</ul>

<!--套餐添加下的名称列表-->
<script type="text/html" id="suit_name_template">
    {{each data as value i}}
    <span class="mb-5"><s class="del_suit_id"></s>{{value.title}}<input type="hidden" name="ticket_id" value="{{value.id}}"></span>
    {{/each}}
</script>
<!--套餐容器模板-->
<script type="text/html" id="suit_thead_template">

    <tr class="suit-edit-th">
        <th width="30px" class="text-c pl-20 cursor-hand">
            <label class="radio-label">
                <input type="checkbox" name="select_suit_all" value="" class="checkbox">
            </label>
        </th>

        {{each data as value i}}
        <th width="{{value.width}}px" class="filter-suit user-click pr-10 cursor-hand">
            {{value.title}}
            <div class="filter-suit-con" data-index="{{value.name}}">
                {{each value.item as item k}}
                <div>
                    <label class="radio-label select-none mr-15">
                        <input type="checkbox" name="filter_{{value.name}}[]" value="{{item.id}}" class="checkbox">{{item.title}}
                    </label>
                </div>
                {{/each}}
                <div class="mt-10">
                    <span class="btn btn-primary-outline size-S reset_suit_filter">重置</span>
                    <span class="btn btn-primary size-S fr confirm_suit_filter">确定</span>
                </div>
            </div>
        </th>
        {{/each}}
        <th class="filter-suit user-click cursor-hand">
            结算方式
            <div class="filter-suit-con" data-index="settlement_type">
                <div>
                    <label class="radio-label select-none mr-15">
                        <input type="checkbox" name="filter_settlement_type[]" value="1" class="checkbox">结算价
                    </label>
                </div>
                <div>
                    <label class="radio-label select-none mr-15">
                        <input type="checkbox" name="filter_settlement_type[]" value="2" class="checkbox">销售价
                    </label>
                </div>
                <div class="mt-10">
                    <span class="btn btn-primary-outline size-S reset_suit_filter">重置</span>
                    <span class="btn btn-primary size-S fr confirm_suit_filter">确定</span>
                </div>
            </div>
        </th>
        <th width="100px" class="text-l pr-10 user-click">
            排序
        </th>
        <th class="text-r pr-10 user-click">
            <span data-status="3" class="ticket-type-administration cursor-hand">门票类型管理</span>
            |
            <span data-status="3" class="change_select_suit_status cursor-hand">批量上架</span>
            |
            <span data-status="2" class="change_select_suit_status cursor-hand">批量下架</span>
            |
            <span data-status="999" class="change_select_suit_status cursor-hand">批量删除</span>
        </th>
    </tr>
</script>
<!--套餐列表模板-->
<script type="text/html" id="suit_tbody_template">
    {{if data.length > 0}}

    {{each data as value i}}
    <tr class="suit-edit-tb">
        <td class="text-c pl-20">
            <label class="radio-label">
                <input type="checkbox" name="select_suit_id" value="{{value.id}}" class="checkbox">
            </label>
        </td>
        <td>{{value.title}}</td>
        {{each value.extend_data as extend_data}}
        <td>{{extend_data.value}}</td>
        {{/each}}
        <td>
            {{if value.status == 0}}
            <img title="编辑中" alt="编辑中" role="button" src="" class="x-action-col-icon x-action-col-0 dest-status-edit" data-id="{{value.id}}">
            {{else if value.status == 1}}
            <img title="审核中" alt="审核中" role="button" src="" class="x-action-col-icon x-action-col-0 dest-status-wait edit-suit-audit-btn" data-status="2" data-id="{{value.id}}">
            {{else if value.status == 2}}
            <img role="button" title="下架中" alt="下架中" src="" class="x-action-col-icon x-action-col-0 dest-status-none edit-suit-status-btn" data-status="3" data-id="{{value.id}}">
            {{else if value.status == 3}}
            <img role="button" title="上架中" alt="上架中" src="" class="x-action-col-icon x-action-col-0 dest-status-ok edit-suit-status-btn" data-status="2" data-id="{{value.id}}">
            {{/if}}
        </td>
        <td>
            <label class="select-box w80">
                <select class="select" data-id="{{value.id}}" name="settlement_type">
                    <option value="1" {{if value.settlement_type == 1}}selected{{/if}}>结算价</option>
                    <option value="2" {{if value.settlement_type == 2}}selected{{/if}}>销售价</option>
                </select>
            </label>
        </td>
        <td>
            <input type="text" name="displayorder" class="input-text w80" onchange="update_sort({{value.id}},$(this))" value="{{value.displayorder}}">
        </td>
        <td class="pr-20">
            <div class="suit-edit-con">
                {{if value.is_edited == 1}}
                <span class="c-green"><span class="fw-7 f-14">·</span> 已维护</span>
                {{else}}
                <span class="c-red"><span class="fw-7 f-14">·</span> 未维护</span>
                {{/if}}
                {{if value.status != 0}}
                <span class="btn btn-primary edit-suit-btn" data-id="{{value.id}}">修改</span>
                {{/if}}
            </div>
        </td>
    </tr>
    {{/each}}
    {{else}}
    <tr class="suit-edit-tb">
        <td class="text-c" colspan="8">未找到相关数据</td>
    </tr>
    {{/if}}
</script>
<script type="text/javascript">
    $(document).ready(function() {
        // 执行切换某个销售属性
        function changeOneSku(suitSkuName, suitItemId, isChecked)
        {
            // 执行操作
            var  spotId = $("#productid").val();

            ST.Util.showLoading('保存中');
            $.post(SITEURL + 'spot/admin/spot/ajax_change_one_sku', {
                sku_name:suitSkuName,
                sku_item_id:suitItemId,
                is_checked:isChecked ? 1 : 0,
                spot_id:spotId
            }, function (res) {
                if (res.status) {
                    ST.Util.hideMsgBox();

                    // 重置筛选条件
                    getSuitFilter();
                } else {
                    ST.Util.showSuccessMsg(res.msg);
                }
            }, 'json')
        }

        // 切换某个销售属性
        $(".sku-container").on("change", ".sku-item", function () {
            var obj = $(this),
                isChecked = obj.attr("checked"),
                suitItemId = obj.val(),
                suitSkuName = obj.attr("name");
            isChecked = isChecked !== undefined;
            if (!isChecked) {
                // 取消时需要提示
                ST.Util.confirmBox('操作确认', '取消选择会删除已设置的报价数据，无法找回，确认删除？', function () {
                    changeOneSku(suitSkuName, suitItemId, isChecked);
                }, function () {
                    obj.prop('checked', true);
                })
            } else {
                changeOneSku(suitSkuName, suitItemId, isChecked);
            }
        })

        /**
         * 切换销售属性执行方法
         * @param suitSkuName
         * @param isChecked boolean
         */
        function changeSkuCheck(suitSkuName, isChecked) {
            // 执行操作
            var selector = '',
                spotId = $("#productid").val();
            if (suitSkuName === 'period_time') {
                selector = "#period_time_con"
            }

            if (!isChecked) {
                ST.Util.showLoading('保存中');
                $.post(SITEURL + 'spot/admin/spot/ajax_sku_close', {
                    sku_name:suitSkuName,
                    spot_id:spotId
                }, function (res) {
                    if (res.status) {
                        ST.Util.hideMsgBox();
                        $(selector).addClass('hide');
                        // 移除已选择的属性
                        $(selector).find('.sku-container').find('input').prop('checked', false);

                        // 重置筛选条件
                        getSuitFilter();
                    } else {
                        ST.Util.showSuccessMsg(res.msg);
                    }
                }, 'json')
            }

            if (isChecked) {
                $(selector).removeClass('hide');
            }
        }

        // 选择销售属性
        $(".suit_sku").on('change', function () {
            var obj = $(this),
                suitSkuName = obj.val(),
                isChecked = obj.attr("checked");
            isChecked = isChecked !== undefined;
            if (!isChecked) {
                // 取消时需要提示
                ST.Util.confirmBox('操作确认', '取消选择会删除已设置的报价数据，无法找回，确认删除？', function () {
                    changeSkuCheck(suitSkuName, isChecked);
                }, function () {
                    obj.prop('checked', true);
                })
            } else {
                ST.Util.confirmBox('操作确认', '选择后需针对时段重新报价？', function () {
                    changeSkuCheck(suitSkuName, isChecked);
                }, function () {
                    obj.prop('checked', false);
                })
            }
        })

        // 点击删除套餐
        $('#suit_list').on('click', '.del_suit_id', function () {
            var parent = $(this).parent(),
                ticket_id = parent.find('input[name="ticket_id"]').val();
            ST.Util.confirmBox('操作确认', '删除套餐会直接删除已设置的报价数据，无法找回，确认删除？', function () {
                ST.Util.showLoading('保存中');
                $.post(SITEURL + 'spot/admin/spot/ajax_del_suit', {
                    ticket_id
                }, function (res) {
                    if (res.status) {
                        ST.Util.hideMsgBox();

                        // 重置筛选条件
                        getSuitFilter();

                        parent.remove();
                    } else {
                        ST.Util.showSuccessMsg(res.msg);
                    }
                }, 'json')
            })
        });

        // 添加到套餐列表中
        function append_suit_list(suitName, suitId)
        {
            var html = '<span><s class="del_suit_id"></s>'+ suitName +'<input type="hidden" name="ticket_id" value="'+suitId+'"></span>';
            $('#suit_list').prepend(html);
        }

        // 套餐输入
        $("#suit_input").on('keyup', function (event) {
            // 判断输入的是不是空格键
            if (event.keyCode === 13) {
                // 代码执行
                var value = $(this).val();
                value = $.trim(value)
                if (value) {
                    // 添加套餐
                    addSuit(value)
                }
            }
        })

        // 添加套餐
        function addSuit(suitName) {
            var spotId = $("#productid").val();
            ST.Util.showLoading('保存中');
            $.post(SITEURL + 'spot/admin/spot/ajax_add_suit', {
                suit_name: suitName,
                spot_id: spotId
            }, function (res) {
                if (res.status) {
                    ST.Util.hideMsgBox();
                    append_suit_list(res.data.suit_name, res.data.suit_id)

                    // 重置筛选条件
                    getSuitFilter();

                    $("#suit_input").val('');
                } else {
                    ST.Util.showSuccessMsg(res.msg);
                }
            }, 'json')
        }

        // 点击添加套餐
        $("#add_suit").on("click", function () {
            var value = $("#suit_input").val();
            value = $.trim(value)
            if (value) {
                // 添加套餐
                addSuit(value)
            } else {
                ST.Util.showFailureMsg('请填写套餐名称');
            }
        })

        getSuitFilter(1);

        // 获取套餐筛选
        function getSuitFilter(type)
        {
            var spot_id = $("input[name=productid]").val();
            if(!spot_id) {
                return false
            }
            $.post(SITEURL + 'spot/admin/spot/ajax_get_suit_filter', {
                spot_id
            }, function (res) {
                if (res.status) {
                    ST.Util.hideMsgBox();

                    var html = template("suit_thead_template", {data: res.data});

                    $("#suit_thead").html(html);

                    // 重新获取数据
                    getSuitList(type);
                } else {
                    ST.Util.showSuccessMsg(res.msg);
                }
            }, 'json')
        }

        // 保存门票状态
        function saveTicketStatus(status, suitId) {
            ST.Util.showLoading('保存中');
            $.post(SITEURL + 'spot/admin/spot/ajax_save_ticket_status', {status, ticket_id: suitId}, function (res) {
                if (res.status) {
                    ST.Util.showSuccessMsg(res.msg);
                    setTimeout(function () {
                        // 加载套餐列表
                        getSuitList();

                        if(status==='999'){
                            $('#suit_list span').each(function (){
                                var id = $(this).find('input[name=ticket_id]').val();
                                if($.inArray(id, suitId) !== -1){
                                    $(this).remove();
                                }
                            })
                        }
                    }, 1500)
                } else {
                    ST.Util.showFailureMsg(res.msg);
                }
            }, 'json')
        }

        // 套餐编辑
        var suit_thead_obj = $("#suit_thead"),
            suit_tbody_obj = $("#suit_tbody");

        // 顶部全选反选
        suit_thead_obj.on('change', 'input[name=select_suit_all]', function () { // 全选反选
            var suit_tbody_check = $(this).attr('checked') !== undefined;
            suit_tbody_obj.find('input[name=select_suit_id]').prop('checked', suit_tbody_check)
        }).on('click', '.change_select_suit_status',function() { //更改套餐状态
            var status = $(this).data('status'),
                suitObj = suit_tbody_obj.find('input[name=select_suit_id]:checked'),
                suitId = [];
            suitObj.each(function(index, item){
                suitId = suitId.concat(item.value);
            });
            if(suitId.length === 0) {
                ST.Util.showFailureMsg('请选择一个套餐')
                return false;
            }

            saveTicketStatus(status, suitId)

        }).on('click', '.reset_suit_filter', function () { //重置筛选
            $(this).parents('.filter-suit-con').find("input[type='checkbox']").prop('checked', false)
        }).on('click', '.confirm_suit_filter', function () { //筛选确定
            // 加载套餐列表
            getSuitList();
        }).on('click','.ticket-type-administration',function(){
            var id = $('#productid').val();
            ST.Util.showBox('门票类型管理', SITEURL + 'spot/admin/spot/dialog_ticket_type_manage/id/' + id, 500, 300, null, null, document, {})
        })

        // 套餐单选
        suit_tbody_obj.on('change', 'input[name=select_suit_id]', function () {
            var suit_thead_check = true;
            if ($(this).attr('checked') !== undefined) {
                var select_suit_obj = suit_tbody_obj.find('input[name=select_suit_id]');
                select_suit_obj.each(function (index, item){
                    if($(item).attr('checked') === undefined){
                        suit_thead_check = false;
                    }
                })
            } else {
                // 取消选择
                suit_thead_check = false;
            }
            suit_thead_obj.find('input[name=select_suit_all]').prop('checked', suit_thead_check)
        }).on('click', '.edit-suit-btn', function (e) {
            var id = $(this).data('id');
            ST.Util.showBox('编辑套餐信息', SITEURL + 'spot/admin/spot/dialog_edit_suit/id/' + id, 1000, 600, null, null, document, {
                loadWindow: window,
                loadCallback: function () {
                    // 刷新套餐列表
                    getSuitList(1);
                }
            })
        }).on('click', '.edit-suit-audit-btn', function (e) {
            var status = $(this).data('status'),
                id = $(this).data('id');
            ST.Util.showBox(
                "审核",
                SITEURL+'spot/admin/spot/dialog_supplier_check?suitid='+id,
                500,'',null,null,document,
                {loadWindow: window, loadCallback: submit_check}
            );

            function submit_check(res) {
                ST.Util.showLoading('保存中');
                $.post(
                    SITEURL+"spot/admin/spot/ajax_audit_ticket"
                    ,{ticket_id:res.suitid,action:'save',status:res.data.status,refuse_msg:res.data.refuse_msg}
                    ,function (res) {
                        if (res.status) {
                            ST.Util.showSuccessMsg(res.msg);
                            setTimeout(function () {
                                // 加载套餐列表
                                getSuitList();
                            }, 1500)
                        } else {
                            ST.Util.showFailureMsg(res.msg);
                        }
                    },'json')
            }
        }).on('click', '.edit-suit-status-btn', function (e) {
            var status = $(this).data('status'),
                id = $(this).data('id');
            saveTicketStatus(status, id)
        }).on('change', 'select[name="settlement_type"]', function (e) {
            var value = $(this).val(),
                id = $(this).data('id');
            ST.Util.showLoading('保存中');
            $.post(SITEURL + 'spot/admin/spot/ajax_save_settlement_type', {ticket_id: id, settlement_type: value}, function (res) {
                if (res.status) {
                    ST.Util.showSuccessMsg(res.msg);
                    setTimeout(function () {
                        // 加载套餐列表
                        getSuitList();
                    }, 1500)
                } else {
                    ST.Util.showFailureMsg(res.msg);
                }
            }, 'json')
        })

        /**
         * 获取套餐列表
         * @param refreshSuitNameList 是否刷新套餐添加下方的列表数据
         */
        function getSuitList(refreshSuitNameList)
        {
            if(refreshSuitNameList !== 2) {
                // 更新景点规格
                changePriceSuitSku();
            }

            var spotId = $("#productid").val(),
                postData =  {spot_id:spotId},
                suitFilterObj = suit_thead_obj.find(".filter-suit-con");

            suitFilterObj.each(function (index, item) {
                var inputObj = $(item).find("input[type='checkbox']:checked"),
                    filterIndex = $(item).data('index'),
                    value = [];
                if (inputObj.length > 0) {
                    inputObj.each(function (index1, item1) {
                        value = value.concat(item1.value);
                    })
                    postData[filterIndex] = value;
                }
            })

            $('.suit-edit-block').addClass('active');

            $.post(SITEURL + 'spot/admin/spot/ajax_get_suit_list', postData, function (res) {
                $('.suit-edit-block').removeClass('active');
                if (res.status) {
                    ST.Util.hideMsgBox();

                    var html = template("suit_tbody_template", {data: res.data});

                    $("#suit_tbody").html(html);

                    if(refreshSuitNameList === 1) {
                        var suit_name_html = template("suit_name_template", {data: res.data});

                        $("#suit_list").html(suit_name_html);
                    }

                    // 更新多套餐预订
                    var multiple_ticket_id = $("select[name=multiple_rule_ticket_id]").val();
                    var multiple_ticket_html = template("multiple_ticket_template", {data: res.data, selected: multiple_ticket_id});
                    $("select[name=multiple_rule_ticket_id]").html(multiple_ticket_html);

                } else {
                    ST.Util.showSuccessMsg(res.msg);
                }
            }, 'json')
        }
    })

    function update_sort(ticket_id,obj)
    {
        var id = 'suit_'+ticket_id;
        var val = obj.val();
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: SITEURL + 'spot/admin/spot/spot/action/update' ,
            data: {id:id,field:'displayorder',val:val} ,
            success: function(result){
            }
        });
    }
</script>